<template>
  <!-- 外协第四步 -->
  <div class="step4 mt-2">
    <div class="top">
      <div class="flexcc left">
        <div class="bold">
          <span>{{ t(`dockRepair.step4`) }}:</span>
          <span>{{ t(`externalAssistance.${store.steplist[3].desc}`) }}</span>
        </div>
      </div>
      <div class="right">
        <span
          class="mr-2"
          v-if="locale === 'zh-CN'"
          >已选择{{ store.inquiryParams.providerList.length }}家服务商</span
        >
        <span
          class="mr-2"
          v-if="locale === 'en'"
        >
          {{ store.inquiryParams.providerList.length }} service providers have been selected
        </span>
        <el-button
          type="primary"
          @click="back"
        >
          {{ t(`dockRepair.Back`) }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="handleInvite"
        >
          {{ t(`dockRepair.btn5`) }}
        </el-button>
      </div>
    </div>

    <el-form
      ref="configFormEl"
      :model="configData"
      :rules="configRules"
      label-width="0"
    >
      <div class="config mt-3">
        <!-- 报价截止时间 -->
        <el-form-item prop="quotationEndTime">
          <el-date-picker
            v-model="dateTime.quotationEndTime"
            type="date"
            value-format="x"
            :placeholder="t('dockRepair.step4page.p1')"
            :disabled-date="disabledDate"
            @change="dateChange($event, 'quotationEndTime')"
          />
        </el-form-item>
      </div>
    </el-form>

    <div class="list mt-3">
      <div
        :class="['item', { active: activeId === item.id }]"
        v-for="item in listData"
        :key="item.id"
        @click.prevent="setActive(item)"
      >
        <div class="head flexsb">
          <div class="flexsc">{{ item.orderNo }}</div>
          <!-- <div class="flexec">
            <el-checkbox v-model="item.checked" label="" />
          </div> -->
        </div>
        <div class="con">
          <div class="a">{{ item.shippingName }}</div>
          <div class="b">
            <span>{{ t('founder') }}:</span>
            <span>{{ item.createByName }}</span>
          </div>
          <div class="b">
            <span>{{ t('createTime') }}:</span>
            <span>{{ dateFormat(item.createTime) }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="flexcc mt-3">
      <el-pagination
        layout="prev, pager, next"
        :hide-on-single-page="total <= page.pageSize"
        :total="total"
        v-model:current-page="page.pageNum"
        :page-size="page.pageSize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!-- 通知 -->
    <Notification
      v-if="dialogNotification"
      :visible="dialogNotification"
      @close="dialogNotification = false"
    />
  </div>
</template>

<script setup>
import { onBeforeMount, ref, reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useExternalAssistance from '@/stores/externalAssistance.js'
import useLogin from '@/stores/login'
import { assistOrderListApi, invitationToQuoteApi } from '@/service/externalAssistance'
import { dateFormat } from '@/utils/index'
import moment from 'moment'

import Notification from './Notification.vue' // 通知

const router = useRouter()
const route = useRoute()

onBeforeMount(() => {
  init()
})

const { t, locale } = useI18n()

watch(locale, (n) => {
  init()
})

const store = useExternalAssistance()
const { back } = store

const storeLogin = useLogin()

// 配置数据
const configData = ref({})
const configRules = reactive({
  quotationEndTime: [{ required: true, message: t('dockRepair.step4page.w1'), trigger: 'change' }]
})

// 日期
const dateTime = ref({
  arrivalTime: null
})
const dateChange = (val, key) => {
  if (val) {
    // 10位时间戳
    configData.value[key] = String(val).substring(0, 10) * 1
  } else {
    configData.value[key] = null
  }
}
// 禁止选择的日期
const disabledDate = (val) => {
  return moment(val).valueOf() < moment().startOf('day').valueOf()
}

// 外协单列表
const listData = ref([])
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 6 // 每页条数
})
const total = ref(0) // 总数
const getList = () => {
  assistOrderListApi(page.value, {}).then(({ rows, total: t }) => {
    listData.value = rows
    total.value = t
  })
}
// 分页
const handleCurrentChange = (val) => {
  getList()
}

const activeId = ref(null)
const setActive = (val) => {
  activeId.value = val.id
}

// 邀请报价
const dialogNotification = ref(false)
const configFormEl = ref(null)
const handleInvite = () => {
  if (!configFormEl.value) return
  configFormEl.value.validate((valid, fields) => {
    if (valid) {
      if (!activeId.value) {
        ElMessage.warning(t('externalAssistance.step4page.w2')) // 请选择外协单
        return
      }

      const { expectedRepairCountries, expectedRepairArea, arrivalTime } = store.inquiryParams

      const params = {
        expectedCountries: expectedRepairCountries,
        expectedArea: expectedRepairArea,
        assistTime: arrivalTime,
        providerList: store.inquiryParams.providerList.map((item) => item.id),
        id: activeId.value,
        ...configData.value
      }

      // console.log(params)

      invitationToQuoteApi(params).then(() => {
        dialogNotification.value = true
      })
    }
  })
}

// 初始化
const init = () => {
  getList() // 坞修单列表
}
</script>

<style scoped lang="scss">
.step4 {
  padding-bottom: 36px;
  .el-button {
    min-width: 150px;
  }
  .top {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0px;
    justify-content: space-between;
  }

  .config {
    background: #fff;
    padding: 24px 29px;

    :deep(.el-select) {
      .el-input__inner {
        height: 36px;
      }
    }
  }

  .list {
    display: grid;
    grid-template-columns: repeat(2, 620px);
    // grid-template-rows: repeat(4, 210px);
    gap: 24px;
    > .item {
      background: #fff;
      border: 2px solid #fff;
      cursor: pointer;
      transition: 0.3s;
      &.active {
        border-color: var(--mainColor);
      }
      .head {
        height: 60px;
        padding: 0 30px;
        border-bottom: 1px solid #eaebec;
      }
      .con {
        padding: 26px 30px;
        height: 151px;
        display: grid;
        grid-template-rows: repeat(3, 18px);
        gap: 23px;
        .a {
          font-size: 16px;
          font-weight: bold;
        }
        .b {
          font-size: 12px;
          span:first-of-type {
            color: #9d9fa5;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
